<template>
        <transition name="move">
    <div class="food" v-show="showFlag" ref="food">
     <div class="food-content">
         <div class="image-header">
             <img :src="food.image" alt="">
             <div class="back" @click="show">
             <i class="iconfont icon-arrow_lift">&#xe799;</i>
             </div>
         </div>
         <div class="content">
             <h1 class="title">{{ food.name }}</h1>
             <div class="detail">
                 <span class="sell-count">月售{{ food.sellCount }} 份</span> <span class="rating">好评率{{ food.rating }}%</span>
             </div>
             <div class="price">
                 <span class="now">￥{{food.price}}</span><span  class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
             </div>
             <div class="cartcontrol-wrapper">
                 <cartcontrol :food="food"></cartcontrol>
             </div>
             <transition name="fade">
             <div  @click.stop="addFirst" class="buy" v-show="!food.count || food.count ===  0">加入购物车</div>
             </transition>
             </div>
         <split v-show="food.info"></split>
         <div class="info" v-show="food.info">
             <h1 class="title">商品信息</h1>
             <p class="text">{{ food.info }}</p>
         </div>
         <split></split>
         <div class="rating">
             <h1 class="title">商品评价</h1>
             <ratingselect
                     :select-type = "selectType"
                     :onlyContent = "onlyContent"
                     :desc = "desc"
                     :ratings = "food.ratings"
                     @selecttype="selecttype"
                     @content="content"
             ></ratingselect>
             <div class="rating-wrapper">
                 <ul v-show="food.ratings && food.ratings.length">
                     <li v-show="neddShow(rating.rateType,rating.text)"
                         v-for="(rating,index) in food.ratings "
                         class="rating-item border-1px"
                         :key="index" >
                         <div class="user">
                             <span class="name">{{ rating.username }}</span>
                             <img  class="avater" :src="rating.avatar" alt="" width="12" height="12">
                         </div>
                         <div class="time">{{ rating.rateTime | formatDate }}</div>
                         <p class="text">
                             <span class="iconfont":class="{'iconzan1': rating.rateType === 0, 'iconchaping': rating.rateType === 1}">
                                 <span class="text-content">{{ rating.text }}</span>
                             </span>

                         </p>
                     </li>
                 </ul>
                 <div class="no-rating" v-show=" !food.ratings || !food.ratings.length ">暂无评价</div>
             </div>
         </div>
         </div>
     </div>
        </transition>
</template>

<script>
    import BScroll from 'better-scroll';
    import cartcontrol from '../../components/home/cartcontrol';
    import ratingselect from '../../components/ratingselect/ratingselect';
    import {eventBus} from "../../components/event-bus.js";
    import Vue from 'vue';
    import split from '../../components/split/split';
    import {formatDate} from '../../../js/date.js';
    const ALL = 2;
    export default {
        name: "food",
        props:{
            food:{
                type:Object,
            }
        },
        data(){
            return {
                showFlag:false,
                selectType:2,
                onlyContent:true,
                desc:{
                    all:'全部',
                    positive:'推荐',
                    negative:'吐槽'
                },
            }
        },
        methods:{
            show(){
                this.selectType = ALL;
                this.onlyContent = true;
                this.showFlag = !this.showFlag
                this.$nextTick( () => {
                    if(!this.scroll) {
                    this.scroll = new BScroll(this.$refs.food, {
                        click: true,
                    })
                }else{
                    this.scroll.refresh();
                }
                })
            },
            addFirst(event){
                if(!event._constructed){
                    return;
                }
                eventBus.$emit('addcart',event.target);
                Vue.set(this.food,'count', 1);
            },
            neddShow(type,text){
                if(this.onlyContent && !text){
                    return false
                }
                if(this.selectType === ALL){
                    return true;
                }else{
                    return type === this.selectType;
                }
            },
            selecttype(type){
                this.selectType = type;
                this.$nextTick(() => {
                    this.scroll.refresh()
            })

            },
            content(){
                this.onlyContent = !this.onlyContent;
                this.$nextTick( () => {
                    this.scroll.refresh()
            })
            }
        },
        filters:{
            formatDate(time){
                let date =new Date(time);
                return formatDate(date,'yyyy-MM-dd hh:mm')
            }
        },
        components:{
            cartcontrol,
            ratingselect,
            split,
        },

    }
</script>

<style lang="stylus" scoped>
@import '~../../stylus/index.styl'
    .food
        position:fixed
        left:0
        top:0
        bottom:48px
        z-index:30
        width:100%
        background:#fff
        &.move-enter-active,&.move-leave-active
            transition: all 0.2s linear
            transform: translate3d(0,0,0)
        &.move-enter,&.move-leave-to
            transform:translate3d(100%,0,0)
       .food-content
        .image-header
            position:relative
            width: 100%
            height:0
            padding-top:100%
            img
                position:absolute
                top:0
                left:0
                width:100%
                height:100%
            .back
                position :absolute
                top:10px
                left:0
                .icon-arrow_lift
                    display:block
                    padding:10px
                    font-size:28px
                    color:#fff

        .content
            position:relative
            padding: 18px
            .title
                line-height:14px
                margin-bottom:8px
                font-size:22px
                font-weight:700
                color:rgb(7,17,27)
            .detail
                margin-bottom:18px
                line-height:10px
                height:10px
                font-size:0
                .sell-count,.rating
                    font-size:16px
                    color:rgb(147,159,159)
                .sell-count
                    margin-right:12px
        .price
            font-weight:700
            line-height:14px
            .now
                margin-right:8px
                font-size:14px
                color:rgb(240,20,20)
            .old
                text-decoration:line-through
                font-size:10px
                color:rbg(147,153,159)
        .cartcontrol-wrapper
            position: absolute
            right: 12px
            bottom: 12px
        .buy
            position: absolute
            right: 18px
            bottom: 18px
            padding: 0 12px
            height: 24px
            line-height: 24px
            background: rgb(0,160,220)
            font-size: 10px
            color: rgb(255,255,255)
            border-radius: 12px
            opacity:1
            &.fade-enter-active,&.fade-leave-active
              transition: all 0.2s
              opacity:1
            &.fade-enter,&.fade-leave-to
              opacity:0
        .info
         padding:18px
         .title
           line-height:14px
           margin-bottom:6px
           font-size:14px
           color:rgb(7,17,27)
         .text
           line-height:24px
           padding: 0 8px
           font-size:12px
           color:rgb(77,85,93)
        .rating
         padding-top:18px
         .title
          line-height:14px
          margin-left:18px
          font-size:14px
          color:rgb(7,17,27)
        .rating-wrapper
          padding: 0 18px
         .rating-item
          padding: 16px 0
          border-1px(rgba(7,17,27,.1))  
          .user
           position:absolute
           right:0
           top:16px
           font-size:0
           .name
            display:inline-block
            margin-right:6px
            font-size:10px
            line-height:12px
            color:rgb(147,153,159)
            vetical-align:top
            .avater
             border-radius:50%
             vetical-align:top
          .time
           font-size:10px
           color:rgb(147,153,159)
           line-height:12px
          .text
           margin-top:6px
           font-size:0
           .iconchaping
            display:inline-block
            margin-right:4px
            font-size:12px
            color:rgb(147,153,159)
            line-height:16px
            vertical-align:top
           .iconzan1
            display:inline-block
            margin-right:4px
            font-size:12px
            color:rgb(0,160,220)
            line-height:16px
            vertical-align:top
           .text-content
             font-size:12px
             color:rgb(7,17,27)
             line-height:16px
             padding-left:8px
        .no-rating
         padding:12px 0
         font-size: 12px
         color:rgb(147,153,159)         
</style>